<template>
  <div>
    <ul class="list_box">
      <li
        v-for="(item, index) in list"
        :key="index"
        class="list_item"
        @click="detailClick(item.gameid)"
      >
        <div class="gameicon">
          <img :src="item.gameicon" alt="" />
        </div>
        <div class="game_content">
          <div class="game_name content_flex">
            <span class="gamename_over van-ellipsis">{{ item.gamename }}</span>
            <van-button :class="appType === '277'? 'btn':'btn_cat'" round>推广</van-button>
          </div>
          <div class="genre_str content_flex">
            <span>{{ item.genre_name }}</span>
            <span :style="{color: appType === '277'? '#3549ea':'#FF8210'}"
              >分成：大陆({{ item.rate_wx }}%) 海外({{ item.rate }}%)</span
            >
          </div>
          <div class="game_status content_flex">
            <div>
              <span v-if="item.client_type === '1'">安卓</span>
              <span v-else-if="item.client_type === '2'">IOS</span>
              <span v-else-if="item.client_type === '3'">双端</span>
              <span v-else-if="item.client_type === '4'">H5端</span>
              <span v-else-if="item.client_type === '5'">单机</span>
            </div>
            <span>{{ item.game_online_time | fnDate }}首发</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import jutils from 'jutils-src'
import { appType } from '../../../assets/js/app';
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
  },
  created () {
    this.appType = appType();
  },
  data() {
    return {
      appType: null
    }
  },
  methods: {
    detailClick(gameid) {
      this.$emit('detail-click', gameid)
    }
  },
  filters: {
    fnDate: function(date) {
      // YYYY-MM-DD HH:ii:ss
      return jutils.formatDate(new Date(date*1000),"YYYY-MM-DD")
    }
  }
};
</script>

<style lang="less" scoped>
.list_box {
  width: 750px;
}

.list_item {
  width: 694px;
  height: 150px;
  padding: 20px 28px;
  border-bottom: 10px solid #ededed;
  display: flex;
}

.gameicon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  margin-right: 20px;
}

.game_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content_flex {
  display: flex;
  justify-content: space-between;
}

.game_name {
  color: #333;
  font-size: 28px;
  font-weight: bold;
  align-items: center;
}

.gamename_over {
  width: 405px;
  /* white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; */
}

.game_name .btn {
  width: 115px;
  height: 48px;
  font-weight: 500;
  font-size: 24px;
  color: #3549ea;
  border: 1px solid #3549ea;
}

.game_name .btn_cat {
  width: 115px;
  height: 48px;
  font-weight: 500;
  font-size: 24px;
  color: #FF8210;
  border: 1px solid #FF8210;
}

.genre_str {
  color: #515151;
  font-size: 24px;
}

.game_status {
  color: #515151;
  font-size: 24px;
}

.gameicon img {
  width: 100%;
  height: 100%;
}
</style>